<!--
 * @Description: 
 * @Author:  huangshuai
 * @Date: 2023-11-02 14:01:07
 * @LastEditTime: 2023-11-06 10:40:00
 * @LastEditors: huangshuai 
-->
<!DOCTYPE html>
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>团队介绍</title>
  <link rel="stylesheet" href="css/about.css" />
  <style>
    body {
      margin: 0;
      padding: 0;
      position: relative;
    }

    #to_top {
      width: 30px;
      height: 40px;
      padding: 20px;
      font: 14px/20px arial;
      text-align: center;
      /* background: #06c; */
      position: absolute;
      top: 0;
      left: 0;
      cursor: pointer;
      color: #fff;
    }
    #aa {
      width: 0;
      height: 0;
      right: 30px;
      bottom: 40px;
      position: absolute;
      border-left: 30px solid transparent; /* 左边透明 */
      border-right: 30px solid transparent; /* 右边透明 */
      /* border-top: 50px solid transparent; 右边透明 */
      border-bottom: 30px solid gray; /* 底部为实心颜色 */
    }
  </style>
</head>
<body>
  <div class="about">
    <div class="stars"></div>
    <iframe
      style="position: absolute; top: 50px; width: 100%; text-align: center"
      src="./a.html"
      scrolling="no"
      frameborder="0"
      width="800px"
      height="700px"
    ></iframe>
    <h3 class="about_tit">TEAM</h3>

    <div
      style="
        position: absolute;
        top: 510px;
        width: 370px;
        height: 5px;
        background-color: rgba(255, 255, 255, 0.8);
        left: 555px;
      "
    ></div>
    <img class="about_bgc" src="./img/8.JPG" alt="" />
    <div class="ribbon">
      <span id="scrollButton1">李娅老师</span>
      <span id="scrollButton2">黄帅</span>
      <span id="scrollButton3">黄子航</span>
      <span id="scrollButton4">胡世纪</span>
      <span id="scrollButton5">欧阳佳鹏</span>
      <span id="scrollButton6">杨泽凯</span>
      <!-- <a href='./index.html'><span>Home</span></a>
            <a href='./about.html'><span>About</span></a>
            <a href='./hobbies.html'><span>Hobbies</span></a> -->
    </div>
    <div id="to_top">
      <div id="aa"></div>
      <div style="margin-top: 20px; margin-left: -50px; color: gray">TOP</div>
    </div>
    <div class="me">
      <!-- <img class="me_img" src="./img/7.JPG" alt=""> -->
      <iframe
        src="./liya.html"
        scrolling="no"
        frameborder="0"
        width="800px"
        height="700px"
      ></iframe>
      <span class="me_tit animate">
        噫吁嚱，危乎高哉！ 蜀道之难，难于上青天！ 蚕丛及鱼凫，开国何茫然！
        尔来四万八千岁，不与秦塞通人烟。 西当太白有鸟道，可以横绝峨眉巅。
        地崩山摧壮士死，然后天梯石栈相钩连。
        上有六龙回日之高标，下有冲波逆折之回川。
        黄鹤之飞尚不得过，猿猱欲度愁攀援。 青泥何盘盘，百步九折萦岩峦。
        扪参历井仰胁息，以手抚膺坐长叹。 问君西游何时还？畏途巉岩不可攀。
        但见悲鸟号古木，雄飞雌从绕林间。 又闻子规啼夜月，愁空山。
        蜀道之难，难于上青天，使人听此凋朱颜！ 连峰去天不盈尺，枯松倒挂倚绝壁。
        飞湍瀑流争喧豗，砯崖转石万壑雷。 其险也如此，嗟尔远道之人胡为乎来哉！
        剑阁峥嵘而崔嵬，一夫当关，万夫莫开。 所守或匪亲，化为狼与豺。
        朝避猛虎，夕避长蛇，磨牙吮血，杀人如麻。 锦城虽云乐，不如早还家。
        蜀道之难，难于上青天，侧身西望长咨嗟！
      </span>
    </div>
    <div class="me">
      <!-- <img class="me_img" src="./img/7.JPG" alt=""> -->
      <span class="me_tit animate">
        君不见黄河之水天上来，奔流到海不复回。
        君不见高堂明镜悲白发，朝如青丝暮成雪。 人生得意须尽欢，莫使金樽空对月。
        天生我材必有用，千金散尽还复来。 烹羊宰牛且为乐，会须一饮三百杯。
        岑夫子，丹丘生，将进酒，杯莫停。 与君歌一曲，请君为我倾耳听。
        钟鼓馔玉不足贵，但愿长醉不愿醒。 古来圣贤皆寂寞，惟有饮者留其名。
        陈王昔时宴平乐，斗酒十千恣欢谑。 主人何为言少钱，径须沽取对君酌。
        五花马、千金裘，呼儿将出换美酒，与尔同销万古愁。
        相见时难别亦难，东风无力百花残。 春蚕到死丝方尽，蜡炬成灰泪始干。
        晓镜但愁云鬓改，夜吟应觉月光寒。 蓬山此去无多路，青鸟殷勤为探看。
      </span>
      <iframe
        src="./hs.html"
        scrolling="no"
        frameborder="0"
        width="800px"
        height="700px"
      ></iframe>
    </div>
    <div class="me">
      <!-- <img class="me_img" src="./img/7.JPG" alt=""> -->
      <iframe
        src="./hzh.html"
        scrolling="no"
        frameborder="0"
        width="800px"
        height="700px"
      ></iframe>
      <span class="me_tit animate">
        噫吁嚱，危乎高哉！ 蜀道之难，难于上青天！ 蚕丛及鱼凫，开国何茫然！
        尔来四万八千岁，不与秦塞通人烟。 西当太白有鸟道，可以横绝峨眉巅。
        地崩山摧壮士死，然后天梯石栈相钩连。
        上有六龙回日之高标，下有冲波逆折之回川。
        黄鹤之飞尚不得过，猿猱欲度愁攀援。 青泥何盘盘，百步九折萦岩峦。
        扪参历井仰胁息，以手抚膺坐长叹。 问君西游何时还？畏途巉岩不可攀。
        但见悲鸟号古木，雄飞雌从绕林间。 又闻子规啼夜月，愁空山。
        蜀道之难，难于上青天，使人听此凋朱颜！ 连峰去天不盈尺，枯松倒挂倚绝壁。
        飞湍瀑流争喧豗，砯崖转石万壑雷。 其险也如此，嗟尔远道之人胡为乎来哉！
        剑阁峥嵘而崔嵬，一夫当关，万夫莫开。 所守或匪亲，化为狼与豺。
        朝避猛虎，夕避长蛇，磨牙吮血，杀人如麻。 锦城虽云乐，不如早还家。
        蜀道之难，难于上青天，侧身西望长咨嗟！
      </span>
    </div>
    <div class="me">
      <!-- <img class="me_img" src="./img/7.JPG" alt=""> -->
      <span class="me_tit animate">
        归来池苑皆依旧，太液芙蓉未央柳。 芙蓉如面柳如眉，对此如何不泪垂？
        春风桃李花开日，秋雨梧桐叶落时。 西宫南内多秋草，落叶满阶红不扫。
        梨园弟子白发新，椒房阿监青娥老。 夕殿萤飞思悄然，孤灯挑尽未成眠。
        迟迟钟鼓初长夜，耿耿星河欲曙天。 鸳鸯瓦冷霜华重，翡翠衾寒谁与共？
        悠悠生死别经年，魂魄不曾来入梦。 临邛道士鸿都客，能以精诚致魂魄。
        为感君王辗转思，遂教方士殷勤觅。 排空驭气奔如电，升天入地求之遍。
        上穷碧落下黄泉，两处茫茫皆不见。 忽闻海上有仙山，山在虚无缥缈间。
        楼阁玲珑五云起，其中绰约多仙子。 中有一人字太真，雪肤花貌参差是。
        金阙西厢叩玉扃，转教小玉报双成。 闻道汉家天子使，九华帐里梦魂惊。
        揽衣推枕起徘徊，珠箔银屏迤逦开。 云鬓半偏新睡觉，花冠不整下堂来。
        风吹仙袂飘飖举，犹似霓裳羽衣舞。 玉容寂寞泪阑干，梨花一枝春带雨。
        含情凝睇谢君王，一别音容两渺茫。 昭阳殿里恩爱绝，蓬莱宫中日月长。
        临别殷勤重寄词，词中有誓两心知。 七月七日长生殿，夜半无人私语时。
        在天愿作比翼鸟，在地愿为连理枝。 天长地久有时尽，此恨绵绵无绝期。
      </span>
      <iframe
        src="./hsj.html"
        scrolling="no"
        frameborder="0"
        width="800px"
        height="700px"
      ></iframe>
    </div>
    <div class="me">
      <!-- <img class="me_img" src="./img/7.JPG" alt=""> -->
      <iframe
        src="./oyjp.html"
        scrolling="no"
        frameborder="0"
        width="800px"
        height="700px"
      ></iframe>
      <span class="me_tit animate">
        <p>
          忽闻水上琵琶声，主人忘归客不发。 寻声暗问弹者谁，琵琶声停欲语迟。
          移船相近邀相见，添酒回灯重开宴。 千呼万唤始出来，犹抱琵琶半遮面。
          转轴拨弦三两声，未成曲调先有情。 弦弦掩抑声声思，似诉平生不得志。
          低眉信手续续弹，说尽心中无限事。
          轻拢慢捻抹复挑，初为《霓裳》后《六幺》。
          大弦嘈嘈如急雨，小弦切切如私语。 嘈嘈切切错杂弹，大珠小珠落玉盘。
          间关莺语花底滑，幽咽泉流冰下难。 冰泉冷涩弦凝绝，凝绝不通声暂歇。
          别有幽愁暗恨生，此时无声胜有声。 银瓶乍破水浆迸，铁骑突出刀枪鸣。
          曲终收拨当心画，四弦一声如裂帛。 东船西舫悄无言，唯见江心秋月白。
          沉吟放拨插弦中，整顿衣裳起敛容。 自言本是京城女，家在虾蟆陵下住。
          十三学得琵琶成，名属教坊第一部。 感我此言良久立，却坐促弦弦转急。
          凄凄不似向前声，满座重闻皆掩泣。 座中泣下谁最多？江州司马青衫湿。
        </p>
      </span>
    </div>
    <div class="me">
      <!-- <img class="me_img" src="./img/7.JPG" alt=""> -->
      <span class="me_tit animate">
        汉皇重色思倾国，御宇多年求不得。 杨家有女初长成，养在深闺人未识。
        天生丽质难自弃，一朝选在君王侧。 回眸一笑百媚生，六宫粉黛无颜色。
        春寒赐浴华清池，温泉水滑洗凝脂。 侍儿扶起娇无力，始是新承恩泽时。
        云鬓花颜金步摇，芙蓉帐暖度春宵。 春宵苦短日高起，从此君王不早朝。
        承欢侍宴无闲暇，春从春游夜专夜。 后宫佳丽三千人，三千宠爱在一身。
        金屋妆成娇侍夜，玉楼宴罢醉和春。 姊妹弟兄皆列土，可怜光彩生门户。
        遂令天下父母心，不重生男重生女。 骊宫高处入青云，仙乐风飘处处闻。
        缓歌慢舞凝丝竹，尽日君王看不足。 渔阳鼙鼓动地来，惊破霓裳羽衣曲。
        九重城阙烟尘生，千乘万骑西南行。 翠华摇摇行复止，西出都门百余里。
        六军不发无奈何，宛转蛾眉马前死。 花钿委地无人收，翠翘金雀玉搔头。
        君王掩面救不得，回看血泪相和流。 黄埃散漫风萧索，云栈萦纡登剑阁。
        峨嵋山下少人行，旌旗无光日色薄。 蜀江水碧蜀山青，圣主朝朝暮暮情。
        行宫见月伤心色，夜雨闻铃肠断声。 天旋地转回龙驭，到此踌躇不能去。
        马嵬坡下泥土中，不见玉颜空死处。 君臣相顾尽沾衣，东望都门信马归。
      </span>
      <iframe
        src="./yzk.html"
        scrolling="no"
        frameborder="0"
        width="800px"
        height="700px"
      ></iframe>
    </div>
  </div>
  <script>
    const scrollButton1 = document.getElementById("scrollButton1");
    scrollButton1.addEventListener("click", function () {
      window.scrollTo({
        top: 830,
        behavior: "smooth", // 平滑滚动
      });
    });
    const scrollButton2 = document.getElementById("scrollButton2");
    scrollButton2.addEventListener("click", function () {
      console.log("www");
      window.scrollTo({
        top: 1570,
        behavior: "smooth", // 平滑滚动
      });
    });
    const scrollButton3 = document.getElementById("scrollButton3");
    scrollButton3.addEventListener("click", function () {
      window.scrollTo({
        top: 2340,
        behavior: "smooth", // 平滑滚动
      });
    });
    const scrollButton4 = document.getElementById("scrollButton4");
    scrollButton4.addEventListener("click", function () {
      window.scrollTo({
        top: 3100,
        behavior: "smooth", // 平滑滚动
      });
    });
    const scrollButton5 = document.getElementById("scrollButton5");
    scrollButton5.addEventListener("click", function () {
      window.scrollTo({
        top: 3860,
        behavior: "smooth", // 平滑滚动
      });
    });
    const scrollButton6 = document.getElementById("scrollButton6");
    scrollButton6.addEventListener("click", function () {
      window.scrollTo({
        top: 4620,
        behavior: "smooth", // 平滑滚动
      });
    });
    // window.onscroll = function () {
    //   var distance =
    //     document.documentElement.scrollTop || document.body.scrollTop; //距离页面顶部的距离

    //   if (distance >= 300) {
    //     //当距离顶部超过300px时，显示图片
    //     document.getElementById("to_top").style.display = "";
    //   } else {
    //     //距离顶部小于300px，隐藏图片
    //     document.getElementById("to_top").style.display = "none";
    //   }

    //   var toTop = document.getElementById("to_top"); //获取图片所在的div

    //   toTop.onclick = function () {
    //     //点击图片时触发的点击事件
    //     document.documentElement.scrollTop = document.body.scrollTop = 0; //页面移动到顶部
    //   };
    // };
    window.onload = function () {
      var oTop = document.getElementById("to_top");

      var screenw =
        document.documentElement.clientWidth || document.body.clientWidth;
      var screenh =
        document.documentElement.clientHeight || document.body.clientHeight;
      oTop.style.left = screenw - oTop.offsetWidth + "px";
      oTop.style.top = screenh - oTop.offsetHeight + "px";
      window.onscroll = function () {
        var distance =
          document.documentElement.scrollTop || document.body.scrollTop; //距离页面顶部的距离

        if (distance >= 300) {
          //当距离顶部超过300px时，显示图片
          document.getElementById("to_top").style.display = "";
        } else {
          //距离顶部小于300px，隐藏图片
          document.getElementById("to_top").style.display = "none";
        }
        var scrolltop =
          document.documentElement.scrollTop || document.body.scrollTop;
        oTop.style.top = screenh - oTop.offsetHeight + scrolltop + "px";
      };
      oTop.onclick = function () {
        // document.documentElement.scrollTop = document.body.scrollTop = 0;
        window.scrollTo({
          top: 0,
          behavior: "smooth", // 平滑滚动
        });
      };
    };
  </script>
</body>
